<template>
  <div class="home-wrapper">
    <div class="list_box">
      <el-card shadow="always" :body-style="{ padding: '0px' }">
        <div style="padding-left:10px">
          <el-button type="success" icon="el-icon-plus">添加继电器</el-button>
          <el-button type="success" icon="el-icon-plus">批量添加继电器</el-button>
          <el-button type="success">批量控制继电器</el-button>
          <el-button type="danger" icon="el-icon-delete">删除继电器</el-button>

          <el-input v-model="input" placeholder="请输入内容"></el-input>
          <el-button type="primary" icon="el-icon-search">搜索</el-button>
        </div>
        <div class="list_item">
         <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange">
            <el-table-column
              type="selection"
              width="55">
            </el-table-column>
            <el-table-column
              label="设备名称"
              width="120">
              <template slot-scope="scope">{{ scope.row.deviceName }}</template>
            </el-table-column>
            <el-table-column
              prop="relayNo"
              label="继电器编号"
              align="center"
              width="120">
            </el-table-column>
            <el-table-column
              prop="enabled"
              label="是否可用"
              align="center"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              prop="relayStatus"
              label="状态"
              align="center"
              show-overflow-tooltip>
              <template slot-scope="scope">
                <el-switch
                  style="display: block"
                  v-model="scope.row.status"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  @change="switchChange(scope.row,scope.$index)"
                  active-text="断开"
                  inactive-text="闭合">
                </el-switch>
              </template>
            </el-table-column>
            <el-table-column
              prop="address"
              label="操作"
               align="center"
              show-overflow-tooltip>
              <template slot-scope="scope">
                <el-button type="success" @click="openSet(scope.row)">继电器编辑</el-button>
              </template>
            </el-table-column>
            <el-table-column
              prop="address"
              label="工作模式"
              show-overflow-tooltip>
              <template slot-scope="scope">
                <el-button type="success" @click="openHander(scope.row)">手动</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-card>
    </div>
    <el-card class="right_sb" shadow="always" :body-style="{ padding: '0px' }">
      <div class="list_item">
        <div class="title">设备列表</div>
        <div class="scroll_box">
          <EleTree v-if="isTree" :treeData="treeData" v-on:listenToChildEvent="changeList" />
        </div>
      </div>
    </el-card>
    <el-dialog
      title="继电器信息编辑"
      :visible.sync="dialogVisible"
      :append-to-body="true"
      width="40%"
      >
      <el-form class="form-wrapper" label-width="100px">
        <el-form-item label="所属设备">
          <span>{{rowData.deviceName}}</span>
        </el-form-item>
 
        <el-form-item label="继电器编号">
          <el-input v-model="rowData.relayNo" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="继电器名称">
          <el-input v-model="rowData.relayName" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="是否可用">
          <el-switch
            v-model="rowData.status"
            active-color="#13ce66"
            inactive-color="#ff4949">
          </el-switch>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">立即提交</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="继电器配置"
      :visible.sync="typeChose"
      :append-to-body="true"
      width="70%"
      >
      <el-select v-model="value" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <p class="pz_title">工作模式：</p>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="手动" name="first">
          <div class="pz_box">是否切换到手动模式</div>
        </el-tab-pane>
        <el-tab-pane label="自动" name="second">
          <div class="pz_box">是否切换到自动模式</div>
          
        </el-tab-pane>
        <el-tab-pane label="定点" name="third">
          <div class="pz_box">是否切换到定点模式</div>
          
        </el-tab-pane>
        <el-tab-pane label="星期" name="fourth">
          <div class="pz_box">是否切换到星期模式</div>
          
        </el-tab-pane>
      </el-tabs>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="typeChose = false">确认</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import EleTree from "@/components/tree/EleTree.vue";
import Map from "@/components/map/proMap.vue";
export default {
  name: "Home",
  components: { EleTree, Map },
  data() {
    return {
      input: "",
      switchVal:true,
      dialogVisible:false,
      rowData:{},
      tableData: [],
      multipleSelection: [],
      isTree:false,
      treeData:[],
      choseId:'',
      userInfo:{},
      typeChose:false,
      options:[
        {
          value: '40191487_继电器1',
          label: '40191487_继电器1'
        }, {
          value: '40191487_继电器2',
          label: '40191487_继电器2'
        }, {
          value: '40191487_继电器3',
          label: '40191487_继电器3'
        }, {
          value: '40191487_继电器4',
          label: '40191487_继电器4'
        }, {
          value: '40191487_继电器5',
          label: '40191487_继电器5'
        }
      ],
      value:'40191487_继电器1',
      activeName:'first'
    };
  },
  mounted(){
    this.treeData = JSON.parse(localStorage.getItem('treeData'));
    this.userInfo = JSON.parse(localStorage.getItem('userInfo'));
    this.isTree = true;
    this.choseId = this.treeData[0].children[0].label;
    this.getRelayByAddress();
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    switchChange(row,index){
      this.tableData[index] = row
      if(row.status){
        this.tableData[index].relayStatus =  '闭合'
      }else{
        this.tableData[index].relayStatus =  '断开'
      }

    },
    openSet(res){
      console.log(res)
      this.rowData = res;
      this.dialogVisible = true;
    },
    openHander(){
      this.typeChose = true;
    },
    //获取继电器列表信息
    getRelayByAddress(){
      this.axios
        .request({
          method: "POST",
          url: "http://47.104.26.124:8080/zhny/device/getRelayByAddress",
          params: {
            userId: this.userInfo.id,
            address:this.choseId
          },
        })
        .then((res) => {
          console.log(res);
          res.data.data.forEach(item => {
            if(item.relayStatus=='闭合'){
              item.status = true
            }else{
              item.status = false
            }
          });
          this.tableData = res.data.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //监听树状图点击事件，切换数据源
    changeList(res) {
      this.choseId = res.label;
      this.getRelayByAddress();
    },
  },
};
</script>

<style scoped lang="less">
@import "../../assets/less/home";
.home-wrapper {
  position: relative;
  overflow: hidden;
      min-height: 600px;
  .list_box {
    margin-top: 20px;
    width: calc(100% - 250px) !important;
    height: calc(100% - 50px);
    float: left;
    padding: 0;
    .el-input {
      width: 200px;
      margin: 10px 10px;
    }
    /deep/.el-card__body{
      height: 100%;
    }
    .list_item{
      height: calc(100% - 52px);
    }
    .yz_item{
      width: calc(20% - 12px) !important;
    }
    @media screen and (max-width: 1500px){
        .yz_item {
          width: calc(33% - 10px) !important;
        }
    }
  }
  .right_sb{
    position: absolute;
    right: 0;
    top: 20px;
    width: 240px;
    height: calc(100% - 50px);
    /deep/.el-card__body{
      height: 100%;
    }
    .list_item{
      height: 100%;
    }
    .scroll_box{
      height: calc(100% - 30px);
    }
  }
  
  /deep/.el-dialog__body{
    border-top: 1px solid #eee;
  }
}
.el-select{
  float: right;
}
.pz_title{
  font-weight: 600;
}
.pz_box{
  height: 300px;
  text-align: center;
  padding-top: 50px;
  box-sizing: border-box;
}
/deep/.el-tabs__nav-wrap{
  width: 100%;
}
</style>
